<template>
	<div class="user-card">
		<div class="user-title">
			<el-icon v-if="row.gender == 1">
				<icon-boy-two theme="outline" fill="#333" />
			</el-icon>
			<el-icon v-if="row.gender == 2">
				<icon-girl theme="outline" fill="#f00" />
			</el-icon>
			<span class="text-bold">{{ row.name || row.practitionersName }}</span>
			<span class="text-sm">{{ row.age }}岁</span>
		</div>

		<p class="flex align-center gap-10 f14">
			<el-icon>
				<icon-id-card-h theme="outline" fill="#333" />
			</el-icon>
			<span>{{ plusXing(row.idCard, 2, 2) }}</span>
		</p>

		<p class="flex align-center gap-10 f14">
			<el-icon>
				<icon-phone-telephone theme="outline" fill="#333" />
			</el-icon>
			<span>{{ plusXing(row.telephone || row.phone, 5, 2) }}</span>
		</p>
	</div>
</template>

<script setup lang="ts">
import { plusXing } from '@/utils/util'
const props = defineProps<{
	row: any
}>()
</script>

<style lang="scss" scoped>
.user-card {
	display: flex;
	flex-flow: column;
	gap: 6px;
	.user-title {
		display: flex;
		align-items: center;
		gap: 6px;
		.text-bold {
			font-size: 16px;
		}
		.text-sm {
			font-size: 12px;
		}
	}
}
</style>
